<template>
	<view class="goodsSwiperBox" v-show="detail">
		<swiper class="gswSw" v-if="detail.length>0" :display-multiple-items="config.multiple||3" :autoplay="config.autoplay" :interval="config.interval||5000" :duration="config.duration||500" :circular="config.circular||false" :next-margin="config.hideMargin?'0':'100rpx'" :current="config.current||0" @change="swiperChange" :disable-touch="disable">
			<swiper-item v-for="(list,i) in detail" :key="i">
				<view class='swiper-item gswGoods' @tap='tapFun' data-type="goods"  :data-index="i">
				  <image :src='appUrl + list.img' mode="aspectFit"></image>
				  <view class='goodsTxt'>{{list.name}}</view>
				  <view class='goodsPrice'><text class="currency">￥</text>{{list.price}}</view>
				</view>
			</swiper-item>
		</swiper>
		<block v-if="config.shadow">
			<view class="shadowLeft" v-show="current>0"></view>
			<view class="shadowRight" v-show="detail.length>config.multiple||3"></view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"goods-swiper",
		props:{
			datas:{},
			config:{}
		},
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				detail:this.datas,
				current:0,
				disable:this.datas.length<=(this.config.multiple||3)//App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
			}
		},
        created() {
			// console.log(this.detail)
			console.info('详情：' + this.detail);
			console.info('详情：' + this.datas);
        },
        methods:{
			swiperChange(e){
				this.current=e.detail.current
				this.$emit("change",e.detail.current)
			},
			tapFun(e){
				var type = e.currentTarget.dataset.type,
					id= parseInt(e.currentTarget.dataset.id)||0,
					index=parseInt(e.currentTarget.dataset.index)||0;
				this.$emit("tapFun",{type:type,id:id,index:index})
			}
        }
	}
</script>

<style>
	.goodsSwiperBox{width: 710rpx;margin: 20rpx;border-radius: 20rpx;background: #fff;padding: 0 20rpx 0 10rpx;position: relative;box-sizing: border-box;}
	.gswSw{height: 250rpx;padding-bottom: 20rpx;}
	.gswGoods{width: 100%;padding-left: 10rpx;font-weight: bold;}
	.gswGoods image{width: 100%;height: 176rpx;border-radius: 10rpx;display: block;}
	.gswGoods .goodsTxt{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;}
	.gswGoods .goodsPrice{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #FF3636;font-size: 30rpx;line-height: 42rpx;display: flex;justify-content: center;}
	.shadowLeft{position: absolute;left: 0;top: 0;width: 125rpx;height: 250rpx;background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,225,0));}
	.shadowRight{position: absolute;right: 0;top: 0;width: 125rpx;height: 250rpx;background-image: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,225,0));}
</style>
